<template>
  <n-config-provider
    :theme="theme.naiveTheme"
    :theme-overrides="theme.naiveThemeOverrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
    class="h-full"
  >
    <naive-provider>
      <router-view />
    </naive-provider>
    <template v-for="comp in components" :key="comp">
      <component :is="AlarmDialog" :id="comp" :visible="true" />
    </template>
  </n-config-provider>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { dateZhCN, zhCN } from 'naive-ui';
import { subscribeStore, useThemeStore } from '@/store';
import { useGlobalEvents } from '@/composables';
import AlarmDialog from '@/components/common/AlarmDialog.vue';

const theme = useThemeStore();

subscribeStore();
useGlobalEvents();

const components = ref(['1', '2', '3'])

onMounted(() => { 
  setInterval(() => {
    if (!components.value.includes('4'))
      components.value.push('4')
  }, 5000);
})

</script>
